<template>
  <div  class="auto">
    <!-- <p class="bg-info text-center" style="padding: 8px;">修改发票状态</p> -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">修改发票状态</a></li>
    </ul>
    <div class="row" style="margin-top:10px; margin-left:10px;">
      <label for="f_bill_id"  class="col-sm-3 control-label">发票编号</label>
      <div class="col-sm-2">
         <input class="form-control"  type="text" v-model="BillInfo.f_bill_id"  disabled>
      </div>
      <label for="f_userinfo_id" class="col-sm-2 control-label">用户编号</label>
      <div class="col-sm-2">
        <input class="form-control"  type="text" v-model="BillInfo.f_userinfo_id"  disabled>
      </div>
    </div>
    <div class="row" style="margin-top:10px; margin-left:10px;" >
      <label for="f_user_name"  class="col-sm-3 control-label">用户姓名</label>
      <div class="col-sm-2" >
        <input class="form-control"  type="text" v-model="BillInfo.f_user_name"  disabled>
      </div>
      <label for="f_user_id"  class="col-sm-2 control-label ">表编号</label>
      <div class="col-sm-2">
        <input class="form-control"  type="number" v-model="BillInfo.f_user_id" disabled >
      </div>
    </div>
    <div class="row" style="margin-top:10px; margin-left:10px;">
      <label for="f_bill_type" class="col-sm-3 control-label">业务类型</label>
      <div class="col-sm-2" >
        <input class="form-control"  type="text" v-model="BillInfo.f_bill_type"  disabled>
      </div>
      <label for="f_card_id" class="col-sm-2 control-label">卡号</label>
      <div class="col-sm-2" >
        <input class="form-control"  type="text" v-model="BillInfo.f_card_id"  disabled>
      </div>
    </div>
    <div class="row" style="margin-top:10px;margin-left:10px;">
      <label for="f_total_money"  class="col-sm-3 control-label">合计金额</label>
      <div class="col-sm-2">
        <input class="form-control"  type="number" v-model="BillInfo.f_total_money" disabled >
      </div>
      <label for="f_paid_money" class="col-sm-2 control-label">实收金额</label>
      <div class="col-sm-2">
        <input class="form-control"  type="number" v-model="BillInfo.f_paid_money" disabled >
      </div>
    </div>
    <div class="row" style="margin-top:10px;margin-left:10px;">
      <label for="f_bill_id"  class="col-sm-3 control-label">状态</label>
      <div class="col-sm-2" >
        <v-select :value.sync="BillInfo.f_bill_state"
          v-model="BillInfo.f_bill_state"
          :options='billState' placeholder='发票状态'
          v-model="BillInfo.f_bill_state"
          close-on-select>
        </v-select>
      </div>
    </div>
    <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
      <button class="btn btn-success width-60" @click="confirm()" :disabled="dis" style="width:80px;margin-left:20px;" >保存</button>
      <button class="btn btn-default width-60" @click="cancel()" style="width:80px;margin-left:20px;">取消</button>
    </div>
  </div>
</template>
<script>
/**
*阶梯水价管理组件
*/
export default {
  data () {
    return {
      model: {},
      BillInfo: {
        id: '',
        f_bill_id: '',
        f_userinfo_id: '',
        f_user_id: '',
        f_user_name: '',
        f_card_id: '',
        f_bill_type: '',
        f_total_money: '',
        f_paid_money: '',
        f_bill_state: ''
      },
      billState: [{label: '已用', value: '已用'},
                  {label: '未用', value: '未用'},
                  {label: '作废', value: '作废'}
                ],
      dis: true
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.BillInfo = Object.assign({}, this.BillInfo, val)
      if (!Array.isArray(this.BillInfo.f_bill_state)) {
        this.BillInfo.f_bill_state = [this.BillInfo.f_bill_state]
      } else {
        this.BillInfo.f_bill_state = this.BillInfo.f_bill_state
      }
      if (val.f_bill_state === '作废') {
        this.dis = true
      } else {
        this.dis = false
      }
    }
  },
  ready () {
    this.BillInfo = Object.assign({}, this.BillInfo, this.data)
    if (!Array.isArray(this.BillInfo.f_bill_state)) {
      this.BillInfo.f_bill_state = [this.BillInfo.f_bill_state]
    } else {
      this.BillInfo.f_bill_state = this.BillInfo.f_bill_state
    }
    if (this.data.f_bill_state === '作废') {
      this.dis = true
    } else {
      this.dis = false
    }
  },
  methods: {
    confirm () {
      this.model = Object.assign({}, this.BillInfo)
      this.model.f_bill_state = this.model.f_bill_state[0]
      this.$BillService.changeBillState(this.model)
      .then(
        (res) => {
          this.$dispatch('success', '修改发票状态', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '修改发票状态', this.data, error)
        }
      )
      this.data = {}
    },
    cancel () {
      this.$dispatch('clean', this.data)
    }
  }
}
</script>
